<template>
    <p>{{ msg }}</p>
    <p>{{ msg.toUpperCase() }}</p>
    <p>{{ msg.split(" ").reverse().join(" ").toUpperCase() }}</p>
    <p>{{ reverse }}</p>
    <p>{{ num }}</p>
    <p>{{ doubleNum }}</p>
    <button @click="doubleNum = 10">修改doubleNum的值</button>
</template>
<script setup>
import { ref, computed } from 'vue';
const msg = ref('Welcome to vue')

// 将指定字符串中所有单词颠倒过来
const reverse = computed(() => {
    return msg.value.split(" ").reverse().join(" ").toUpperCase()
})

const num = ref(10)
const doubleNum = computed({
    get() {
        return num.value * 2
    },
    set(value) {
        num.value = value / 2;
    }
})

</script>